<template>
  <!-- 车辆信息 -->
  <view class="car-info">
    <view class="car-name flex flex-jc-sb flex-ai-c" @click="goCarInfoPage()">
      <view class="name">
        <image :src="carInfo.img" mode="widthFix" class="img"></image>
        <text class="ml-20">{{ carInfo.name }}</text>
      </view>
      <u-icon
        v-if="iconShow"
        name="arrow-right"
        size="24rpx"
        color="#999"
        class="icon-right"
      ></u-icon>
    </view>

    <view class="other-info flex flex-jc-sb flex-ai-c">
      <view class="item flex flex-jc-sb flex-ai-c">
        <view @click="copy(phoneNum)">{{ phoneNum }}</view>
        <image
          src="/static/img/afterSales/tonghua.png"
          mode="aspectFit"
          @click="callPhone"
        />
      </view>
      <view class="item" @click="copy(carInfo.carbrand)">{{
        carInfo.carbrand
      }}</view>
      <view class="item">{{ carInfo.km }}km</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'carInfoHeader',
  props: {
    // 车辆信息
    // carInfo: {
    //   type: Object,
    //   default: () => ({
    //     img: require('../../static/img/im/face/face_14.jpg'),
    //     name: '宝马 760Li 8.0 2020精选雅致版',
    //     carbrand: '川A76SD7',  // 车牌
    //     km: '1234552km',  // 公里数
    //     vin: '13558522415',
    //   })
    // },

    // // 对象自定义key
    // keyOption: {
    //   type: Object,
    //   default: () =>({
    //     img: 'img',
    //     name: 'name',
    //     carbrand: 'carbrand',
    //     vin: 'vin',
    //     km: 'km'
    //   })
    // },

    // 是否显示右边箭头图标
    iconShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },

  computed: {
    // 车辆信息
    carInfo() {
      let info = this.$store.state.afterSales.carInfo
      return info
    },

    // 客户手机号
    phoneNum() {
      return this.$store.state.afterSales.arrvialPhone
    },
  },

  methods: {
    // 跳转到车辆信息页
    goCarInfoPage() {
      if (!this.iconShow) return
      uni.navigateTo({
        url: '/pages_afterSales/carInfo/carInfo',
      })
    },

    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNum,
      })
    },

    copy(data) {
      // #ifndef H5
      uni.setClipboardData({
        data: data,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped>
.car-info {
  padding-top: 15rpx;
  background-color: #fff;

  .car-name {
    .name {
      flex: 1;
      padding: 0 120rpx;
      line-height: 52rpx;
      text-align: center;
    }
    .icon-right {
      margin-right: 25rpx;
    }

    .img {
      width: 42rpx;
      height: 42rpx;
      vertical-align: middle;
    }
  }

  .other-info {
    margin-top: 10rpx;
    padding: 20rpx 0;

    .item {
      // width: 33.3%;
      flex: 1;
      padding: 0 25rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;

      & + .item {
        border-left: 1px solid #eee;
      }

      image {
        width: 84rpx;
        height: 38rpx;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
